/**
 * Kris 2023/03/23
*/

<style lang="scss">
    .weeks-selector {
        display: flex;
        flex-wrap: wrap;
        background-color: #f5f5f5;
        padding: 2px 4px;
        border-radius: 4px;

        &--disabled {
            cursor: not-allowed;
            border: 1px solid #d9d9d9;
            color: rgba(0,0,0,.25);
            background-color: rgba(0,0,0,.04);

        }

        &__item {
            border-radius: 4px;
            padding: 0 22px;
            text-align: center;
            // margin-left: 2px;
            margin: 2px;
            font-size: 14px;
            color: rgba(0,0,0,.88);
            cursor: pointer;
            transition: all .15s;
            user-select: none;

            // &:first-child {
            //     margin-left: 0;
            // }

            &--selected {
                background-color: #fff;
            }

            &--selector-disabled {
                color: rgba(0,0,0,.25);
                cursor: not-allowed;
            }

            &--disabled {
                cursor: not-allowed;
                color: rgba(0,0,0,.25);
            }
        }
    }
</style>

<script>

const Weekdays = [
  { key: 'Monday', label: '一', value: 1 },
  { key: 'Tuesday', label: '二', value: 2 },
  { key: 'Wednesday', label: '三', value: 3 },
  { key: 'Thursday', label: '四', value: 4 },
  { key: 'Friday', label: '五', value: 5 },
  { key: 'Saturday', label: '六', value: 6 },
  { key: 'Sunday', label: '日', value: 0 }
]

export default {
  props: {
    value: {
      type: Array,
      required: true,
      default() {
        return []
      }
    },
    availableWeekdays: {
      /**
             * An array of week keys
             */
      type: Array,
      required: false,
      default() {
        return []
      }
    },
    disabled: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data() {
    return {

    }
  },
  computed: {
    weekdays() {
      return Weekdays.map((day, index) => {
        return {
          ...day,
          disabled: this.availableWeekdays.indexOf(day.key) === -1,
          selected: this.isExists(day.key, this.weekdaysSelected)
        }
      })
    },
    weekdaysSelected: {
      get() {
        return this.value
      },
      set(weekdays) {
        this.$emit('input', weekdays)
      }
    },
    classes() {
      return {
        'weeks-selector': true,
        'weeks-selector--disabled': this.disabled
      }
    }
  },
  methods: {
    isExists(weekKey, weekdays) {
      return this.findIndex(weekKey, weekdays) !== -1
    },
    findIndex(weekKey, weekdays) {
      for (const index in weekdays) {
        const day = weekdays[index]
        if (weekKey === day.key) { return index }
      }
      return -1
    },
    find(weekKey, weekdays) {
      const index = this.findIndex(weekKey, weekdays)
      if (index === -1) return null
      return weekdays[index]
    },

    handleClick(day) {
      if (this.disabled || day.disabled) return
      this.findIndex(day.key, this.weekdaysSelected) === -1 ? this.check(day) : this.uncheck(day)
    },

    check(day) {
      const { weekdaysSelected } = this
      if (this.isExists(day.key, weekdaysSelected)) return
      weekdaysSelected.push(day)
    },
    uncheck(day) {
      const { weekdaysSelected } = this
      const index = this.findIndex(day.key, weekdaysSelected)
      if (index === -1) return
      weekdaysSelected.splice(index, 1)
    },

    buildItemClasses(day) {
      return {
        'weeks-selector__item': true,
        'weeks-selector__item--disabled': day.disabled,
        'weeks-selector__item--selected': day.selected,
        'weeks-selector__item--selector-disabled': this.disabled
      }
    }
  }
}
</script>

<template>
  <div class="weeks-selector" :class="classes">
    <div
      v-for="day in weekdays"
      :key="day.key"
      :class="buildItemClasses(day)"
      @click="handleClick(day)"
    >
      {{ day.label }}
    </div>
  </div>
</template>
